<!-- 组件说明 * 1. 封装echarts图表组件 * 2. 支持配置项option -->

<template>
  <div ref="chartDom" class="chart" />
</template>

<script setup>
import * as echarts from "echarts";
import { markRaw } from "vue";

const props = defineProps({
  option: {
    type: Object,
    default: () => {},
  },
});
const chartDom = ref();
let myChart = null;

// 初始化图表
const init = () => {
  myChart = markRaw(echarts.init(chartDom.value));
  // 设置图表配置项
  myChart.setOption(props.option);
};

const setOption = (option) => {
  myChart.setOption(option);
};

const resize = () => {
  myChart?.resize();
};

const clear = () => {
  myChart?.clear();
};

onMounted(() => {
  init();
  window.addEventListener("resize", resize, false);
});

defineExpose({
  resize,
  setOption,
  clear
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize, false);
});
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
